<template>
	<view class="content">
		<view class="List">
			<view class="my">
				<view class="form-control">
					<u--form labelPosition="left" :model="formData" ref="uForm">
						<view class="input">
							<image src="@/static/user.png"
								style="height: 50rpx; width: 50rpx;margin-left: 30rpx;margin-right: 30rpx;">
							</image>
							<u-form-item borderBottom ref="item1">
								<u--input v-model="formData.oldname" border="none" placeholder="旧用户名"
									disabled></u--input>
							</u-form-item>
						</view>
						<view class="input">
							<image src="@/static/user.png"
								style="height: 50rpx; width: 50rpx;margin-left: 30rpx;margin-right: 30rpx;">
							</image>
							<u-form-item borderBottom ref="item1">
								<u--input v-model="formData.username" border="none" placeholder="新用户名"></u--input>
							</u-form-item>
						</view>
						<view class="input">
							<image src="@/static/phone.jpg"
								style="height: 50rpx; width: 50rpx;margin-left: 30rpx;margin-right: 30rpx;">
							</image>
							<u-form-item borderBottom ref="item1">
								<u--input v-model="formData.phone" border="none" placeholder="新电话"></u--input>
							</u-form-item>
						</view>
						<view class="input">
							<image src="@/static/pwd.png"
								style="height: 50rpx; width: 50rpx;margin-left: 30rpx;margin-right: 30rpx;">
							</image>
							<u-form-item borderBottom ref="item1">
								<u--input v-model="formData.password" border="none" placeholder="新密码"
									type="password"></u--input>
							</u-form-item>
						</view>
					</u--form>
				</view>
			</view>
		</view>

		<view class="bottom">
			<view class="login" @click="edit">确认修改</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		updatePerson,
		guard
	} from "@/ww.js"

	export default {
		data() {
			return {
				show: false,
				formData: {
					username: '',
					password: '',
					oldname: '',
					phone: ''
				},
				username: '',
				bool: false //判断修改条件
			}
		},
		onLoad() {
			guard('../login/login')
			//取出缓存中的账号、密码
			if (uni.getStorageSync("userInfo")) {
				const userInfo = uni.getStorageSync("userInfo");
				this.formData.oldname = userInfo.username
			}
		},
		methods: {
			async edit() {
				console.log(this.formData, 'ppp')
				this.bool = true
				for (let i in this.formData) {
					if (this.formData[i] == "") {
						this.bool = false
					}
				}
				if (this.bool) {
					updatePerson(this.formData).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: `修改成功`
							})
							uni.setStorage({ //存入Storage
								key: 'userInfo', //自己取个名字
								data: { //存的数据可以是很多条
									'password': this.formData.password,
									'phone': this.formData.phone,
									'username': this.formData.username
								},
								success: () => {
									uni.removeStorageSync("HBphone");
									uni.removeStorageSync("HBpassword1");
									uni.removeStorageSync("HBshow1");
									uni.removeStorageSync("checkboxshow1");
									uni.removeStorageSync("HBusername");
									uni.removeStorageSync("HBpassword");
									uni.removeStorageSync("HBshow");
									uni.removeStorageSync("checkboxshow");
									setTimeout(() => {
										uni.reLaunch({
											url: "/pages/login/login",
										})
									}, 500)
								}
							})
						}
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						icon: false,
						title: '修改失败',
						message: "请检查修改数据",
					})
				}



			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f0f0f0;
		width: 100%;
		height: 100vh;
		padding-top: 5vw;

		.bottom {
			width: 90vw;
			margin-left: 5vw;
			margin-bottom: 30rpx;

			.login {
				width: 100%;
				margin-top: 40rpx;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 20rpx;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
				background-color: #359cff;
			}

		}

		a {
			text-decoration: none;
		}

		::v-deep .uni-checkbox-input {
			width: 30rpx;
			height: 30rpx;
			margin-bottom: 10rpx;
		}
	}

	.input {
		display: flex;
		align-items: center;
	}

	/deep/ .u-form-item {
		width: 70vw;
	}

	/deep/ .u-form-item__body {
		width: 70vw;
	}


	.List {
		width: 100vw;
		overflow: auto;

		.my {
			width: 90vw;
			margin: 1.5vh auto;
			padding: 3vw 0;
			background: #fff;
			border-radius: 15rpx;
			display: flex;
			box-shadow: 0px 5px 10px #888888;
		}
	}
</style>